<template>
  <nav class="top-nav"  style="-webkit-app-region: drag">
    <!-- 导航栏 -->
    <el-menu
      mode="horizontal"
      style="-webkit-app-region: no-drag"
      class="my-menu"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b"
      :default-active="$route.path"
      router
    >
      <el-menu-item
        class="can-not-select"
        :index="nav.navPath"
        v-for="(nav, index) in navs"
        :key="index"
        v-text="nav.navName"
      ></el-menu-item>
    </el-menu>
  </nav>
</template>

<script>
export default {
  name: "NavTop",
  data() {
    return {
      navs: [
        {
          navName: "会话",
          navIcon: "el-icon-position",
          navPath: "/conversation"
        },
        {
          navName: "朋友圈",
          navIcon: "el-icon-magic-stick",
          navPath: "/friend-circle"
        },
        {
          navName: "群发助手",
          navIcon: "el-icon-magic-stick",
          navPath: "/group-assistant"
        },
        {
          navName: "功能大全",
          navIcon: "el-icon-info",
          navPath: "/tools"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.top-nav {
  flex: 1 1 auto;
//   border: solid red 1px;
}
::v-deep .my-menu {
    // border: solid red 1px;
    width: 343px;
    // width: auto;
  .el-menu-item {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
  }
}
</style>
